<!--电量监测  折线图-->
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
</head>
<style type="text/css">
	#sliderSegmentedControl{
		background-color: #A0B1C4;
		color:white;
	}
	.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
		color:white;
		/*border:2px solid #F0AD4E;*/
		background-color: #F0AD4E;
		 border-bottom：0；
	}
	header h1.mui-title{
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.mui-slider-indicator.mui-segmented-control{
		
	}
	.mui-icon-back:before, .mui-icon-left-nav:before{
		color:#000000;
	}
	.mui-icon-refresh:before{
		color:#000000;
	}
</style>
<body>
	<div class="mui-content">
	    <div class="mui-slider">
	    	<div id="sliderSegmentedControl_1" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<a class="mui-control-item mui-active" href="#item1" data-id="1">
					电流
				</a>
				<a class="mui-control-item" href="#item2" data-id="2">
					电压
				</a>
				<a class="mui-control-item" href="#item3" data-id="3">
					功率
				</a>
				<a class="mui-control-item" href="#item4" data-id="4">
					功率因数
				</a>
				<a class="mui-control-item" href="#item5" data-id="5">
					温度
				</a>
				<a class="mui-control-item" href="#item5" data-id="6">
					需量
				</a>
			</div>
			<div class="mui-slider-group">
				<div id="item1" class="mui-slider-item mui-control-content mui-active">
					<div class="mui-search">
						<div id="load_table" style="width:100%;height:250px;"></div>
					</div>
				</div>
			</div>
	    </div>
	    
	    <div class="mui-slider">
	    	<div id="sliderSegmentedControl_2" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<a class="mui-control-item mui-active" href="#time1" data-id="7">
					日电量
				</a>
				<a class="mui-control-item" href="#time2" data-id="8">
					月电量
				</a>
				<a class="mui-control-item" href="#time3" data-id="9">
					年电量
				</a>
			</div>
			<div class="mui-slider-group">
				<div id="time1" class="mui-slider-item mui-control-content mui-active">
					<div class="mui-search">
						<div id="load_power" style="width:100%;height:250px;"></div>
					</div>
				</div>
			</div>
	    </div>
	</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/common.js"></script>
<script type="text/javascript" src="../js/ZNative.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	
	
	var X_Time = []; 		
	var IA =[];
	var IB =[];
	var IC =[];
	var UA =[];
	var UB =[];
	var UC =[];
	var PA =[];
	var PB =[];
	var PC =[];
	var PS =[];
	var PFA =[];
	var PFB =[];
	var PFC =[];
	var PFS =[];
	var TA =[];
	var TB =[];
	var TC =[];
	var XL =[];
	
	WebOS.OnReadly(function(args){

		var json = JSON.parse(args);
		var token = WebOS.getItem('token');
		var dcsId = json.stationId;
		var dclId = json.dclId;

		mui.ajax(getUrl + 'stoOriginal/getRealTimeXianData',{
				data: {
					sysId:sysId,
					stoStationId:dcsId,
					token: token,
					stoLineId:dclId,
					stoOrignalTime:currentTime()//此参数为获取当时时间的函数
				},
				dataType: 'json', //服务器返回json格式数据
				type: 'post', //HTTP请求类型
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: function(data){
					
					if(data.tokenFlag == false) {
						mui.alert(data.msg);
						//		记得每个页面都要有这个判断						
					} else {
						var respone=JSON.stringify(data);
						//console.log(respone );
						
			            for(i=0;i<data.line.length;i++){
			            	
							if(data.line[i].stoSyncTime == null){
								continue;
							}
							
			        		IA.push(data.line[i].m10001);
	                		IB.push(data.line[i].m10002);
	                		IC.push(data.line[i].m10003);
	                		UA.push(data.line[i].m10004);
	                		UB.push(data.line[i].m10005);
	                		UC.push(data.line[i].m10006);
	                		
	                		PA.push(data.line[i].m10067);
	                		PB.push(data.line[i].m10068);
	                		PC.push(data.line[i].m10069);
	                		PS.push(data.line[i].m10017);
	                		
	                		PFA.push(data.line[i].m10010);
	                		PFB.push(data.line[i].m10011);
	                		PFC.push(data.line[i].m10012);
	                		PFS.push(data.line[i].m10018);
	                		
	                		TA.push(data.line[i].m10073);
	                		TB.push(data.line[i].m10074);
	                		TC.push(data.line[i].m10075);
							XL.push(data.line[i].m11040);
	                		var time = data.line[i].stoSyncTime.split(' ')[1].substr(0,5);
	
							//var time = data.line[i].xAxis;
							X_Time.push(time);
	                		
			            }
		            	
	                   	//调用点击事件
						dbClick(1);
						dbClick(7);
						
					}
					
                 },   
				error: function(e) {
					
				}
			});





	var byId = function(id) {
		return document.getElementById(id);
	};
	
	mui('#sliderSegmentedControl_1').on('tap','a',function(){
		
		
		dbClick($(this).data('id'));
	});
	
	mui('#sliderSegmentedControl_2').on('tap','a',function(){
		
		
		dbClick($(this).data('id'));
	});
			
	var lineChart = echarts.init(byId('load_table'));
	function dbClick(id){

		
	   	switch(id){//当你点击哪个id就传哪个id数据
	   		
	   		case 1:lineChart.clear(); lineChart.setOption(getOption(macthData_I()));break;
	   		case 2:lineChart.clear(); lineChart.setOption(getOption(macthData_U()));break;
	   		case 3:lineChart.clear(); lineChart.setOption(getOption(macthData_P()));break;
	   		case 4:lineChart.clear(); lineChart.setOption(getOption(macthData_PF()));break;
	   		case 5:lineChart.clear(); lineChart.setOption(getOption(macthData_T()));break;
			case 6:lineChart.clear(); lineChart.setOption(getOption(macthData_XL()));break;
			case 7:macthData_day();break;
	   		case 8:macthData_month();break;
	   		case 9:macthData_year();break;
		
	   	}
	}
	
	
	function macthData_U(){
		
		var series = [{
						name: 'Ua',
						type: 'line',
						data: UA
					}, {
						name: 'Ub',
						type: 'line',
						data: UB
					}, {
						name: 'Uc',
						type: 'line',
						data: UC
					}];
		var lineData = {title:['Ua','Ub','Uc'],series:series,unit:'V',X_Time:X_Time};
		
		return lineData;
	
	}
	
	function macthData_I(){
		
		var series = [{
						name: 'Ia',
						type: 'line',
						data: IA,
//						itemStyle: {color: 'yellow'}
					}, {
						name: 'Ib',
						type: 'line',
						data: IB,
//						itemStyle: {color: 'green'}
					}, {
						name: 'Ic',
						type: 'line',
						data: IC,
//						itemStyle: {color: 'red'}
					}];
					
		var lineData = {title:['Ia','Ib','Ic'],series:series,unit:'A',X_Time:X_Time};
		
		return lineData;
	
	}
	
	function macthData_P(){
		
		var series = [{
						name: 'Pa',
						type: 'line',
						data: PA
					}, {
						name: 'Pb',
						type: 'line',
						data: PB
					}, {
						name: 'Pc',
						type: 'line',
						data: PC
					},{
						name: 'P总',
						type: 'line',
						data: PS
					}];
					
		var lineData = {title:['Pa','Pb','Pc','P总'],series:series,unit:'kW',X_Time:X_Time};
		
		return lineData;
	
	}
	
	function macthData_PF(){
		
		var series = [{
						name: 'PFa',
						type: 'line',
						data: PFA
					}, {
						name: 'PFb',
						type: 'line',
						data: PFB
					}, {
						name: 'PFc',
						type: 'line',
						data: PFC
					},{
						name: 'PF总',
						type: 'line',
						data: PFS
					}];
					
		var	lineData = {title:['PFa','PFb','PFc','PF总'],series:series,unit:'',X_Time:X_Time};
		
		return lineData;
	
	}
	
	
	function macthData_T(){
		
		var series = [{
						name: 'Ta',
						type: 'line',
						data: TA
					}, {
						name: 'Tb',
						type: 'line',
						data: TB
					}, {
						name: 'Tc',
						type: 'line',
						data: TC
					}];
					
		var	lineData = {title:['Ta','Tb','Tc'],series:series,unit:'℃',X_Time:X_Time};
		
		return lineData;
	
	}
	
	function macthData_XL(){
		
		var series = [{
						name: '需量',
						type: 'line',
						data: XL
					}];
		var lineData = {title:['需量'],series:series,unit:'kWh',X_Time:X_Time};
		
		return lineData;
	
	}
	
	
	
	
	//日用电量
	function macthData_day(){
	
		var xAxisData = new Array();
		var seriesData = new Array();
//		var token = localStorage.getItem('token'); 
		return mui.ajax(getUrl + 'stpDay/getForDay',{
				data: {
					sysId:sysId,
					stpStationId:dcsId,
//					token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjMwOTQ3MzA4MTU2NjMsInBheWxvYWQiOiIyIn0.TSWPG_uXX_tftUc45EVD_AwVWYDpgifLpoPugH-FD40",
					token:token,
					stpLineId:dclId,
					stpSyncTime:currentTime()//此参数为获取当时时间的函数
				},
				dataType: 'json', //服务器返回json格式数据
				type: 'post', //HTTP请求类型
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: function(data){
					
					if(data.tokenFlag == false) {
						mui.alert(data.msg);
						//		记得每个页面都要有这个判断						
					} else {
						for(i=0;i<data.length;i++){
							xAxisData.push(data[i].t);
							seriesData.push(data[i].d);
		            	}
						
						var series = [{
							name: '日用电量',
							type: 'bar',
							data: seriesData
						}];
	
						var barData = {title:['日用电量'],series:series,unit:'kWh',X_Time:xAxisData};
						var barChart = echarts.init(byId('load_power'));
						barChart.setOption(getOption(barData));	
						/*echarts.dispose(byId('load_power'));
						barChart = echarts.init(byId('load_power'));*/
					} 		
                 },   
				 error: function(e) {
					//异常处理；
					
				}
		});
	
	}

	
	//月用电量
	function macthData_month(){
	
		var xAxisData = new Array();//
		var seriesData = new Array();//
	
		return mui.ajax(getUrl + 'stpMonth/selecDlMonth',{
				data: {
					sysId:sysId,
					stpStationId:localStorage.getItem('dcsId'),
					token: token,
					stpLineId:localStorage.getItem('dclId'),
					stpSyncTime:currentTime()//此参数为获取当时时间的函数
				},
				dataType: 'json', //服务器返回json格式数据
				type: 'post', //HTTP请求类型
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: function(data){
//					console.log(JSON.stringify(token))
					if(data.tokenFlag == false) {
						mui.alert(data.msg);
						//		记得每个页面都要有这个判断						
					} else {
						var respone=JSON.stringify(data);
			            for(i=0;i<data.length;i++){
						
							xAxisData.push(data[i].t);
							if(data[i].d != ''){
								seriesData.push((new Number((new Number((data[i].d)*1+1).toFixed(2))- 1).toFixed(2)));
							}else{
								seriesData.push(data[i].d);
							}
		
			           }
						var series = [{
							name: '日用电量',
							type: 'bar',
							data: seriesData
						}];
						
						var	barData = {title:['日用电量'],series:series,unit:'kWh',X_Time:xAxisData};
						var barChart = echarts.init(byId('load_power'));
						barChart.setOption(getOption(barData));
						
					}	
                 },   
				 error: function(e) {
					
				}
		});

	}
	
	
	//年用电量
	function macthData_year(){
	
		var xAxisData = new Array();//
		var seriesData = new Array();//
		return mui.ajax(getUrl + 'stpYear/getForYear',{
				data: {
					sysId:sysId,
					stpStationId:dcsId,
					token: token,
					stpLineId:dclId,
					stpSyncTime:currentTime()//此参数为获取当时时间的函数
				},
				dataType: 'json', //服务器返回json格式数据
				type: 'post', //HTTP请求类型
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: function(data){
					
					if(data.tokenFlag == false) {
						mui.alert(data.msg);
						//		记得每个页面都要有这个判断						
					} else {
						
						var respone=JSON.stringify(data);
			            for(i=0;i<data.length;i++){
						
							xAxisData.push(data[i].t);
							seriesData.push(data[i].d);
		
			            }
						
						var series = [{
							name: '年用电量',
							type: 'bar',
							data: seriesData
						}];
						
						var	barData = {title:['年用电量'],series:series,unit:'kWh',X_Time:xAxisData};
						var barChart = echarts.init(byId('load_power'));
						barChart.setOption(getOption(barData));
						/*echarts.dispose(document.getElementById('year_yuanzhi'));
				var myChart = echarts.init(document.getElementById('year_yuanzhi'),charTheme_1);*/
						
					}
             	
                 },   
				 error: function(e) {
					
				}
		});
	
	}
	
	
	
	
	
	
	
	var getOption = function(data) {
				
				var title  = data.title;
				var unit  = data.unit;
				var Time = data.X_Time;
				var series  = data.series;
				
				var chartOption = {
						color: ['#e6b600','#2b821d', '#c12e34', '#0098d9'],
						legend: {
							data: title
						},
						grid: {
							x: 35,
							x2: 10,
							y: 30,
							y2: 25
						},
						toolbox: {
							show: false,
							feature: {
								mark: {
									show: true
								},
								dataView: {
									show: true,
									readOnly: false
								},
								magicType: {
									show: true,
									type: ['line', 'bar']
								},
								restore: {
									show: true
								},
								saveAsImage: {
									show: true
								}
							}
						},
						tooltip : {
				            show:true,
							trigger: 'axis'
						},
						calculable: false,
						xAxis: [{
							type: 'category',
							data: Time
						}],
						yAxis: [{
							name : unit ,
							type: 'value',
							splitArea: {
								show: true,
							},
							axisTick: {
					            inside: true
					        },
					        scale: true,
					        axisLabel: {
					            margin: 2,
					            formatter: function (value, index) {
									if (value >= 10000 && value < 10000000) {
					                    value = value / 10000 + "万";
					                } else if (value >= 10000000) {
					                    value = value / 10000000 + "千万";
					                }else if (value >= 100000000){
					                	value = value / 100000000 + "亿";
					                }else if (value >= 10000000000){
					                	value = value / 10000000000 + "百亿";
					                }else if (value >= 100000000000){
					                	value = value / 100000000000 + "千亿";
					                }
					                return value; 
					            }
					        }
						}],
						series: series
					};
					return chartOption;
			};
	});
	
	
	
	
			
			

</script>
</html>